<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="购物车">
        <template #left>
          <p class="city"><van-icon name="location-o" />东城区</p>
        </template>
        <template #right>
          <p style="color: #387bfb" >编辑</p>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <van-swipe-cell v-for="item in store.cartList" :key="item.id">
        <!-- 图片懒加载 -->
        <img v-for="img in imageList" v-lazy="img" />
        <van-card
        
  
         v-lazy="image"
          :num="item.count"
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
         
        >
      
         <template #tag>
            <van-checkbox v-model="item.checked"></van-checkbox>
             </template>
             <template #footer>
              <button @click="subCount(item.id,item.count)" :disabled="item.count <=1"  >-</button>
               {{item.count}}
               <button @click="addCount(item.id,item.count)">+</button>
                 </template >
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="delItems(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-submit-bar v-show="isShow"  :price="store.totalPrice*100" button-text="去结算" @submit="onSubmit">
      
</van-submit-bar>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import { showSuccessToast } from 'vant';
import {useRouter} from 'vue-router'
import shake from '@/utils/shake'
import {ref,computed} from 'vue'
const store = useCounterStore();
const router =useRouter()
const isShow = ref(true)

//删除
const delItems=(id)=>{
    store.delItem(id)
}
//全选和反选
const allChecked=computed({
     get(){
        if(store.cartList.length==0)
        {
            return false
        }else
        {
            return store.cartList.every(item=>item.checked==true)
        }
     },
     set(value)
     {
         store.cartList.forEach(item=>item.checked=value)
     }
})

//防抖函数 加减数量
//防抖加
const addCount =shake((id,count)=>{
    store.updateAddCount(id,count)
},1000)
//防抖减
const subCount =shake((id,count)=>{
store.updateSubCount(id,count)
 showSuccessToast('最小为1');
    
},1000)
//防抖结算
const onSubmit=shake(()=>{
   router.push('/order')
},1000)


</script>

<style lang="scss" scoped>
.van-submit-bar {
    bottom:45px;
}


</style>